<div ng-init="main_event.init();" class="kmi-layout-content QT05-main-content">
    <div class="kmi-header-row">
        <div  class="header-title" ng-bind="main_event.headerTitle"></div>
        <button ng-click="main_event.search_page_change_icon();">
            <img src='image/smes_v340/header/W_Com_Search_nor_32.png'></img>
            <div class='kmi-can-click'></div>
        </button>
        <button ng-click="main_event.model_load_open_icon();">
            <img src='image/smes_v340/header/W_Com_History_nor_32.png'></img>
            <div class='kmi-can-click'></div>
        </button>
        <button ng-click="main_event.panel_item_menu_open();">
            <img src='image/smes_v340/header/W_Com_DescendingPower_nor_32.png'></img>
            <div class='kmi-can-click'></div>
        </button>
        <button ng-click="main_event.model_save_open_icon();">
            <img src='image/smes_v340/header/W_Com_Save_nor_32.png'></img>
            <div class='kmi-can-click'></div>
        </button>
        <button ng-click="main_event.download();">
            <img src='image/smes_v340/header/W_MoveLastPage_nor_32.png'></img>
            <div class='kmi-can-click'></div>
        </button>
        <button ng-click="main_event.tree_collapse();">
            <img src='image/smes_v340/header/W_Com_Layout_Change1_nor_32.png'></img>
            <div class='kmi-can-click'></div>
        </button>
    </div>
    <div class="kmi-layout-main-content">
        <div class="kmi-layout-page">
            <div class="content-panel">
                <div class="tree-panel">
                    <div class="tree-header">
                        <label ng-bind="'QT05.tree.title' | translate"></label>
                    </div>
                    <div class="tree-content">
                        <script type="text/ng-template" id="QT05_tree_menu.html">
                            <div style="display:flex;flex-direction:row;padding: 0px 0px;" ui-tree-handle>
                                <div ng-class="{'line':node.show_line}" ></div>
                                <div style="flex:1;">
                                    <div style="display:flex;flex-direction:row;align-items:center;white-space:nowrap;" ng-class="{'tree-item-active':main_event.bom_select_id == this.$id, 'odd': node.lev % 2 === 1, 'even': node.lev % 2 === 0 }">
                                        <div class="node-wrapper" ng-click="node.tree_toggle(this,node)">
                                            <div class="label-container"><label>{{node.lev}}</label></div>
                                            <div class="lot-code-container"><label>{{node.current_lot_code}}</label></div>
                                            <div class="node-info" ng-click="node.lot_info(this, $event)">
                                                <img ng-if="main_event.bom_select_id != this.$id" src="image/smes_v340/W_Information_gray_32.png" alt="">
                                                <img ng-if="main_event.bom_select_id == this.$id" src="image/smes_v340/W_Information_white_32.png" alt="">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div ui-tree-nodes ng-model="node.nodes">
                                <div data-collapsed = "false" ng-repeat="node in node.nodes" ui-tree-node ng-include="'QT05_tree_menu.html'"></div>
                            </div>
                        </script>
                        <div ui-tree data-drag-enabled ="false" style="overflow:auto;width:100%;height:100%;" class="wrapper">
                            <div ui-tree-nodes  ng-model="main_event.bom_detail" id="tree-root">
                                <div data-scroll-container=".wrapper" data-collapsed = "true" ng-repeat="node in main_event.bom_detail" ui-tree-node ng-include="'QT05_tree_menu.html'"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="vertical-border"></div>
                <div class="info-panel">
                    <div class="tab-container">
                        <div class="tab-panel">
                            <div ng-click="main_event.panel_tab_active(panel_item)" ng-repeat="panel_item in main_event.panel_list | filter:{visible:true} | orderBy: 'seq'" ng-class="{'active':panel_item.active}" ><label ng-bind="panel_item.panel_name"></label><div class="bottom-line"></div></div>
                        </div>
                    </div>
                    <div class="info-list">
                        <div ng-repeat="panel_item in main_event.panel_list | filter:{visible:true} | orderBy:['-active','seq']" class="info-item-layout">
                            <div class="title-range">
                                <div>
                                    <label ng-bind="main_event.getPanelTitle(panel_item.panel_name)"></label>
                                </div>
                                <div> 
                                    <i ng-click="main_event.sheet_grid_open(panel_item.panel_code)" class="material-icons">menu</i>
                                </div>
                            </div>
                            <div class="note">
                                <div><label ng-bind="'QT05.main.item_code' | translate" class="label-bold"></label></div>
                                <div><label ng-bind="main_event.bom_query_setting.item_code"></label></div>
                                <div><label ng-bind="'QT05.main.item_name' | translate" class="label-bold"></label></div>
                                <div><label ng-bind="main_event.bom_query_setting.item_name"></label></div>
                            </div>
                            <div style="flex: 1;min-height:200px;">
                                <div ng-include src ="panel_item.url"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
